<template>
  <a-layout class="base-layout">
    <!-- 顶部导航栏 -->
    <a-layout-header class="header">
      <div class="header-content">
        <div class="logo">
          <span class="logo-text">用户管理系统</span>
        </div>

        <div class="header-right">
          <a-space :size="16">
            <!-- 用户信息 -->
            <a-dropdown>
              <div class="user-info">
                <UserOutlined class="user-icon" />
                <span class="username">{{ userInfo?.username }}</span>
                <DownOutlined class="dropdown-icon" />
              </div>

              <template #overlay>
                <a-menu>
                  <a-menu-item key="profile">
                    <UserOutlined />
                    <span>个人信息</span>
                  </a-menu-item>
                  <a-menu-item key="settings">
                    <SettingOutlined />
                    <span>系统设置</span>
                  </a-menu-item>
                  <a-menu-divider />
                  <a-menu-item key="logout" @click="handleLogout">
                    <LogoutOutlined />
                    <span>退出登录</span>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </a-space>
        </div>
      </div>
    </a-layout-header>

    <!-- 主体内容 -->
    <a-layout>
      <!-- 侧边菜单 -->
      <a-layout-sider
        v-model:collapsed="collapsed"
        :trigger="null"
        collapsible
        class="sider"
      >
        <a-menu
          v-model:selected-keys="selectedKeys"
          mode="inline"
          theme="dark"
          :items="menuItems"
          @click="handleMenuClick"
        />

        <!-- 折叠按钮 -->
        <div class="sider-trigger" @click="toggleCollapsed">
          <MenuUnfoldOutlined v-if="collapsed" />
          <MenuFoldOutlined v-else />
        </div>
      </a-layout-sider>

      <!-- 内容区域 -->
      <a-layout-content class="content">
        <div class="content-wrapper">
          <router-view v-slot="{ Component }">
            <transition name="fade" mode="out-in">
              <component :is="Component" />
            </transition>
          </router-view>
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup lang="ts">
import { ref, computed, watch, h } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useAuthStore } from "@/stores/auth";
import { Modal } from "ant-design-vue";
import {
  UserOutlined,
  LogoutOutlined,
  SettingOutlined,
  DownOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  TeamOutlined,
} from "@ant-design/icons-vue";

const router = useRouter();
const route = useRoute();
const authStore = useAuthStore();

// 用户信息
const userInfo = computed(() => authStore.userInfo);

// 侧边栏折叠状态
const collapsed = ref(false);

// 当前选中的菜单项
const selectedKeys = ref<string[]>([]);

// 菜单项配置
const menuItems = [
  {
    key: "/user",
    icon: () => h(TeamOutlined),
    label: "用户管理",
    title: "用户管理",
  },
];

// 监听路由变化，更新选中的菜单
watch(
  () => route.path,
  (path) => {
    selectedKeys.value = [path];
  },
  { immediate: true }
);

// 切换侧边栏折叠状态
function toggleCollapsed() {
  collapsed.value = !collapsed.value;
}

// 菜单点击事件
function handleMenuClick({ key }: { key: string }) {
  router.push(key);
}

// 退出登录
function handleLogout() {
  Modal.confirm({
    title: "确认退出",
    content: "您确定要退出登录吗？",
    okText: "确定",
    cancelText: "取消",
    onOk: () => {
      authStore.logout();
      router.push("/login");
    },
  });
}
</script>

<style scoped lang="less">
.base-layout {
  height: 100vh;

  .header {
    background: #001529;
    padding: 0;
    height: 64px;
    line-height: 64px;

    .header-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100%;
      padding: 0 24px;

      .logo {
        display: flex;
        align-items: center;

        .logo-text {
          color: #fff;
          font-size: 20px;
          font-weight: 600;
          margin-left: 12px;
        }
      }

      .header-right {
        .user-info {
          display: flex;
          align-items: center;
          cursor: pointer;
          color: rgba(255, 255, 255, 0.85);
          transition: color 0.3s;

          &:hover {
            color: #fff;
          }

          .user-icon {
            font-size: 16px;
          }

          .username {
            margin: 0 8px;
          }

          .dropdown-icon {
            font-size: 12px;
          }
        }
      }
    }
  }

  .sider {
    background: #001529;
    position: relative;

    .sider-trigger {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: rgba(255, 255, 255, 0.85);
      background: rgba(255, 255, 255, 0.03);
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      transition: all 0.3s;

      &:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.08);
      }

      :deep(.anticon) {
        font-size: 18px;
      }
    }
  }

  .content {
    background: #f0f2f5;
    min-height: calc(100vh - 64px);
    overflow: auto;

    .content-wrapper {
      padding: 24px;
      min-height: calc(100vh - 64px - 48px);
    }
  }
}

// 路由切换动画
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
